<template>
  <div class="box">
    <el-select 
        multiple 
        v-model="selectNameMap" 
        ref="inputBox"
        size="small" 
        @focus="focus"
        :readonly="$attrs.readonly"
        :disabled="$attrs.disabled"
        clearable
        :placeholder="$attrs.placeholder"
        :style="'width:' + width + 'px'"
        class="select" 
        @change="selectChange"
        @remove-tag="removeTag"
        @clear="clearList"
        value-key='name'
      >
    </el-select>
     <div v-if="visible">
        <PostDialog ref='getPost' @postInfo="info" :tagsList="tagsList" :multiple="multiple" @closeDialog="visible = false"/>
    </div>
  </div>
</template>

<script>
import PostDialog from './PostDialog.vue'
import { getUserProfile } from "@/api/system/user";
import {gePostList} from '@/api/custom/formDesigner'
export default {
  name: "PostSelection",
  components: {
    PostDialog,
  },
  props:['dialogIsShow','multiple','defaultValueKey','value','clearable','readonly','pageFlag'],
  data() {
    return {
      tagsList: [],
      visible: false,
      selectNameMap:this.value || [],
      width: this.$attrs.maxLength,
      style:this.clearable?'position: absolute;top: 11px;right: 8px;color: darkgrey;cursor: pointer;':'display:none'
    }
  },
  created () {
    // console.log('pageFlag', this.pageFlag)
    if (this.pageFlag === 'edit' || this.pageFlag === 'view') {
        gePostList(this.selectNameMap).then(res => {
            this.tagsList = [...res.data]
            this.selectNameMap = []
            this.selectNameMap = res.data.map(obj => {
                return obj.name
            })
        })
    } else {
      if(this.defaultValueKey === 'presetValue'){
        getUserProfile().then(response => {
            this.selectNameMap = []
            this.selectNameMap.push(response.data.posts[0].name)
            this.tagsList.push(response.data.posts[0])
        })
      }else if(this.defaultValueKey === 'stickValue' && this.selectNameMap.length > 0){
        gePostList(this.selectNameMap).then(res => {
            this.tagsList = [...res.data]
            this.selectNameMap = []
            this.selectNameMap = res.data.map(obj => {
                return obj.name
            })
        })
      }
    }
  },
   watch:{
     multiple(){
      // this.tagsList=[]
      // this.selectNameMap= []
    },
    dialogIsShow(){
      if(this.dialogIsShow){
        this.visible= true
      }
    },
    defaultValueKey(){
        this.changeValue()
    },
    tagsList(newVal, oldVal){
        const newTemp = newVal.map(item=>item.id)
        this.$emit('input', newTemp)
        this.$emit('change', newTemp)
    },
    clearable(){
      if(this.clearable){
          this.style='position: absolute;top: 11px;right: 8px;color: darkgrey;cursor: pointer '
      }else{
        this.style='display:none'
      }
    }
  },
  methods: {
    clearList () {
        this.tagsList = []
    },
    changeValue () {
        const _this=this
        if(this.defaultValueKey==='presetValue'){
            getUserProfile().then(response => {
                _this.selectNameMap = []
                _this.selectNameMap.push(response.data.posts[0].name)
                _this.tagsList.push(response.data.posts[0])
            })
        }else{
            this.tagsList=[]
            this.selectNameMap= []
        }
    },
    clear(){
      this.tagsList=[]
      this.selectNameMap= []
    },
    removeTag(val){
      this.tagsList=this.tagsList.filter(item=>item.name!==val)
    },
    selectChange(val){
      this.selectNameMap= val
    },
    info(data) {
      this.tagsList = data;
      this.selectNameMap=data?.map(item=> {
        return item.name
      })
    },
    focus() {
      this.$refs.inputBox.blur()
      if(this.readonly) return
      this.visible= true
    },
     handleClose(tag) {
        this.tagsList.splice(this.tagsList.indexOf(tag), 1);
      },
  },
};
</script>

<style lang='less' scoped>
  
    .selectStyle{
        display: flex;
        width: 100%;
    }
    .inputSelect{
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: #FFFFFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding: 0 15px;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
    }
    .selectStyle .el-tag+.el-tag{
        margin-left: 10px;
    }
    /deep/ .el-select{
      width: 100%;
    }
    .el-icon-caret-top:before {
      content: '';
    }
  
</style>
